<template>
  <van-overlay :show="show">
    <div
      class="wrapper shake-slow"
      @click.stop="hideOverlay"
      v-if="currStep==='first'"
    >
      <span class="prize-title">恭喜！获得1个盲盒</span>
      <img
        :src="poster"
        alt=""
        class="bind-box-img"
      >
      <van-button
        plain
        hairline
        type="primary"
        round
        @click.stop="openBindBox"
      >打开盲盒</van-button>
    </div>
    <!-- <div
      class="wrapper polaroid"
      @click.stop
      v-if="currStep==='second'"
    >
      <span class="prize-title">恭喜获得</span>
      <div class="polaroid-box">
        <div class="polaroid-detail">
          <img
            :src="lightGif"
            alt=""
            class="polaroid-gif"
          >
        </div>
        <div class="detail-box">
          <img
            v-if="info&&info.poster"
            :src="info.poster"
            alt=""
            class="bind-box-img"
          >
          <span v-if="info&&info.name">{{info.name}}</span>
        </div>
      </div>
      <van-button
        plain
        hairline
        type="primary"
        round
        @click.stop="acceptBlindbox"
      >立即收下</van-button>
    </div> -->
    <div
      class="wrapper polaroid"
      @click.stop
      v-if="currStep==='second'"
    >
      <span class="prize-title">恭喜获得</span>
      <div class="polaroid-box">
        <div class="polaroid-detail">
          <img
            :src="lightGif"
            alt=""
            class="polaroid-gif"
          >
        </div>
        <div class="detail-box">
          <img
            v-if="info&&info.poster"
            :src="info.poster"
            alt=""
            class="bind-box-img"
          >
          <span v-if="info&&info.name">{{info.name}}</span>
        </div>
      </div>
      <van-button
        plain
        hairline
        type="primary"
        round
        @click.stop="acceptBlindbox"
      >立即收下</van-button>
    </div>
  </van-overlay>
</template>

<script>
import { Button, Overlay } from "vant";
export default {
  name: "BindBoxItemPrize",
  components: {
    [Button.name]: Button,
    [Overlay.name]: Overlay,
  },
  props: {
    poster: {
      type: String,
      default: "",
    },
    step: {
      type: String,
      default: "",
    },
    prizeInfo: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    step: function (val) {
      this.currStep = val;
    },
    prizeInfo: {
      deep: true,
      handler: function (val) {
        this.info = val;
      },
    },
  },
  data() {
    return {
      bindBoxImg: "",
      moneyTicketImg:
        "http://alivod.sdxgxx.cn/image/default/308AFDA342524B1E9C17196BA901509B-6-2.png",
      lightGif:
        "http://alivod.sdxgxx.cn/image/default/2C61890CED224B698D0691740C09AEEF-6-2.png",
      show: false,
      currStep: "first",
      info: {},
    };
  },
  created() {
    this.info = this.prizeInfo;
    this.currStep = this.step;
  },
  methods: {
    showOverlay() {
      this.show = true;
    },
    hideOverlay() {
      this.show = false;
    },
    //  打开盲盒
    openBindBox() {
      this.$emit("openBindBox");
    },
    // 收下盲盒
    acceptBlindbox() {
      this.$emit("acceptBlindbox");
    },
  },
};
</script>

<style scoped lang="less">
.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  .prize-title {
    font-size: 54px;
    color: #fde78f;
    line-height: 68px;
  }

  .bind-box-img {
    width: 339px;
    height: 339px;
    margin: 24px 0 59px;
  }

  .van-button--plain.van-button--primary {
    width: 360px;
    height: 120px;
    background: #3f87f0;
    border-radius: 60px;
    border: none;
    font-size: 40px;
    font-weight: 500;
    color: #ffffff;
  }
}
.shake-slow.wrapper {
  .bind-box-img {
    animation-play-state: running;
    animation-name: shake-slow;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
  @keyframes shake-slow {
    2% {
      transform: translate(6px, -6px) rotate(2.5deg);
    }
    4% {
      transform: translate(-5px, 1px) rotate(1.5deg);
    }
    6% {
      transform: translate(7px, -3px) rotate(-2.5deg);
    }
    8% {
      transform: translate(-7px, -5px) rotate(2.5deg);
    }
    10% {
      transform: translate(-3px, 2px) rotate(-1.5deg);
    }
    12% {
      transform: translate(3px, 6px) rotate(3.5deg);
    }
    14% {
      transform: translate(-7px, 2px) rotate(-1.5deg);
    }
    16% {
      transform: translate(-6px, 6px) rotate(-2.5deg);
    }
    18% {
      transform: translate(6px, 0px) rotate(1.5deg);
    }
    20% {
      transform: translate(9px, 9px) rotate(2.5deg);
    }
    22% {
      transform: translate(7px, -9px) rotate(2.5deg);
    }
    24% {
      transform: translate(2px, 1px) rotate(0.5deg);
    }
    26% {
      transform: translate(10px, 4px) rotate(-0.5deg);
    }
    28% {
      transform: translate(-9px, 3px) rotate(3.5deg);
    }
    30% {
      transform: translate(10px, 5px) rotate(1.5deg);
    }
    32% {
      transform: translate(6px, 8px) rotate(-2.5deg);
    }
    34% {
      transform: translate(9px, 9px) rotate(3.5deg);
    }
    36% {
      transform: translate(-5px, 0px) rotate(-0.5deg);
    }
    38% {
      transform: translate(-2px, -2px) rotate(0.5deg);
    }
    40% {
      transform: translate(-3px, 8px) rotate(2.5deg);
    }
    42% {
      transform: translate(-7px, 8px) rotate(3.5deg);
    }
    44% {
      transform: translate(6px, -6px) rotate(0.5deg);
    }
    46% {
      transform: translate(1px, -2px) rotate(3.5deg);
    }
    48% {
      transform: translate(-5px, 7px) rotate(-2.5deg);
    }
    50% {
      transform: translate(-8px, 1px) rotate(2.5deg);
    }
    52% {
      transform: translate(-9px, -2px) rotate(1.5deg);
    }
    54% {
      transform: translate(4px, -9px) rotate(3.5deg);
    }
    56% {
      transform: translate(-6px, -1px) rotate(0.5deg);
    }
    58% {
      transform: translate(-3px, -6px) rotate(-0.5deg);
    }
    60% {
      transform: translate(8px, 4px) rotate(-0.5deg);
    }
    62% {
      transform: translate(0px, -9px) rotate(0.5deg);
    }
    64% {
      transform: translate(9px, -2px) rotate(3.5deg);
    }
    66% {
      transform: translate(-7px, 10px) rotate(3.5deg);
    }
    68% {
      transform: translate(-7px, -9px) rotate(-1.5deg);
    }
    70% {
      transform: translate(9px, -2px) rotate(-2.5deg);
    }
    72% {
      transform: translate(-4px, 0px) rotate(2.5deg);
    }
    74% {
      transform: translate(1px, -2px) rotate(-1.5deg);
    }
    76% {
      transform: translate(-8px, -5px) rotate(2.5deg);
    }
    78% {
      transform: translate(-9px, 2px) rotate(1.5deg);
    }
    80% {
      transform: translate(-4px, 1px) rotate(-1.5deg);
    }
    82% {
      transform: translate(-6px, 10px) rotate(2.5deg);
    }
    84% {
      transform: translate(6px, -3px) rotate(-0.5deg);
    }
    86% {
      transform: translate(-1px, -2px) rotate(1.5deg);
    }
    88% {
      transform: translate(1px, 9px) rotate(1.5deg);
    }
    90% {
      transform: translate(3px, 9px) rotate(-0.5deg);
    }
    92% {
      transform: translate(-3px, -1px) rotate(0.5deg);
    }
    94% {
      transform: translate(-7px, 4px) rotate(1.5deg);
    }
    96% {
      transform: translate(6px, 1px) rotate(0.5deg);
    }
    98% {
      transform: translate(-8px, 2px) rotate(-0.5deg);
    }
    0%,
    100% {
      transform: translate(0, 0) rotate(0);
    }
  }
}
.money-box,
.polaroid {
  .detail-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    width: 460px;
    height: 420px;
    padding-bottom: 65px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #dbe9fc 0%, #fcefde 100%);
    box-shadow: 0px 0px 3px 8px rgba(179, 201, 233, 0.75);
    border-radius: 28px;
    position: relative;
    margin-top: 75px;
    margin-bottom: 40px;

    span {
      font-size: 34px;
      font-weight: 500;
      color: #222222;
      line-height: 48px;
      text-align: center;
    }

    .money-img {
      position: absolute;
      top: -70px;
      left: 0;
      right: 0;
      margin: auto;
      width: 296px;
      height: 302px;
    }
  }
}

.wrapper.polaroid {
  .polaroid-box {
    width: 420px;
    height: 420px;
    position: relative;
    margin-top: 90px;
    margin-bottom: 30px;

    .polaroid-detail {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 420px;
      height: 420px;
      background: linear-gradient(180deg, #dbe9fc 0%, #fcefde 100%);
      box-shadow: 0px 0px 3px 8px rgba(179, 201, 233, 0.75);
      border-radius: 28px;
      overflow: hidden;

      .polaroid-gif {
        width: 500px;
        height: 500px;
      }
    }

    .detail-box {
      position: absolute;
      top: -50px;
      left: 0;
      width: 100%;
      height: 100%;
      background: none;
      box-shadow: none;
    }
  }
}
</style>
